<template>
  <van-grid>
    <template v-if="userType === 'driver'">
      <van-grid-item icon="photo-o" text="今日完单">
        <template #icon>
          <div style="margin-bottom: 10px">{{ data.total_orders_today }}</div>
        </template>
      </van-grid-item>
      <van-grid-item icon="photo-o" text="今日费用">
        <template #icon>
          <div style="margin-bottom: 10px">{{ data.total_expenses_today }}</div>
        </template>
      </van-grid-item>
      <van-grid-item icon="photo-o" text="今日里程">
        <template #icon>
          <div style="margin-bottom: 10px">{{ data.total_mileage_today }}</div>
        </template>
      </van-grid-item>
      <van-grid-item icon="photo-o" text="行驶时长">
        <template #icon>
          <div style="margin-bottom: 10px">
            {{ data.total_execution_time_today }}
          </div>
        </template>
      </van-grid-item>
    </template>

    <template v-if="userType === 'dispatch'">
      <van-grid-item icon="photo-o" text="当前出车">
        <template #icon>
          <div style="margin-bottom: 10px">{{ data.today_car_start }}</div>
        </template>
      </van-grid-item>
      <van-grid-item icon="photo-o" text="空闲车辆">
        <template #icon>
          <div style="margin-bottom: 10px">{{ data.today_car_free }}</div>
        </template>
      </van-grid-item>
      <van-grid-item icon="photo-o" text="今日里程">
        <template #icon>
          <div style="margin-bottom: 10px">
            {{ data.total_trajectory_mileage }}
          </div>
        </template>
      </van-grid-item>
      <van-grid-item icon="photo-o" text="待办任务">
        <template #icon>
          <div style="margin-bottom: 10px">{{ data.today_order_agent }}</div>
        </template>
      </van-grid-item>
    </template>
    <template v-if="userType === 'normal'">
      <van-grid-item icon="photo-o" text="进行中">
        <template #icon>
          <div style="margin-bottom: 10px">10</div>
        </template>
      </van-grid-item>
      <van-grid-item icon="photo-o" text="已完成">
        <template #icon>
          <div style="margin-bottom: 10px">24</div>
        </template>
      </van-grid-item>
      <van-grid-item icon="photo-o" text="今日里程">
        <template #icon>
          <div style="margin-bottom: 10px">1111</div>
        </template>
      </van-grid-item>
      <van-grid-item icon="photo-o" text="行程数">
        <template #icon>
          <div style="margin-bottom: 10px">5</div>
        </template>
      </van-grid-item>
    </template>

    <template v-if="userType === 'admin'">
      <van-grid-item icon="photo-o" text="进行中">
        <template #icon>
          <div style="margin-bottom: 10px">10</div>
        </template>
      </van-grid-item>
      <van-grid-item icon="photo-o" text="已完成">
        <template #icon>
          <div style="margin-bottom: 10px">24</div>
        </template>
      </van-grid-item>
      <van-grid-item icon="photo-o" text="今日里程">
        <template #icon>
          <div style="margin-bottom: 10px">1111</div>
        </template>
      </van-grid-item>
      <van-grid-item icon="photo-o" text="总运单数">
        <template #icon>
          <div style="margin-bottom: 10px">5</div>
        </template>
      </van-grid-item>
    </template>
  </van-grid>
</template>

<script lang="ts" setup>
  import { ref, onMounted } from 'vue';
  import { useUserStore } from '@/store/index';
  import {
    apiGetDriverHomeData,
    apiGetDispatchHomeData,
    apiGetDispatchHomeMile,
  } from '@/api/home';

  const { userType, driver_id } = useUserStore();

  const data = ref<any>({});

  const getData = () => {
    if (userType === 'driver') {
      apiGetDriverHomeData({
        driver_id,
      }).then((res) => {
        console.log('🚀 ~ getData ~ res:', res);
        data.value = res.data;
      });
    } else if (userType === 'dispatch') {
      apiGetDispatchHomeData().then((res) => {
        data.value = {
          ...data.value,
          ...res.data,
        };
      });
      apiGetDispatchHomeMile().then((res) => {
        data.value = {
          ...data.value,
          ...res.data,
        };
      });
    }
  };

  onMounted(() => {
    getData();
  });
</script>

<style lang="less" scoped></style>
